<template>
    <div class="container">
        <div class="left">
            <div class="nav">
                <div class="row"><router-link :to="{name:''}">邀请回答</router-link></div>
                <div class="row"><router-link :to="{name:''}">最新问题</router-link></div>
                <div class="row"><router-link :to="{name:''}">为你推荐</router-link></div>
                <div class="row"><router-link :to="{name:''}">人气问题</router-link></div>
            </div>
            <div class="show" v-for="question in questions " :key="question.id">
                <div class="relative">
                    <div>
                        <span>最近{{question.follow}}人关注</span>
                    </div>
                    <a href="javascript:" target="_blank" >{{ question.title }}</a>
                    <div class="data">
                     <span>641226浏览 ·</span>
                     <span>9486回答  ·</span>
                     <span>9707关注  ·</span>
                     <span>1个月前的提问 </span>
                    </div>
                </div>
           <div class="btn">
            <el-button type="primary" icon="el-icon-edit">写回答</el-button>
           </div>
            </div>
        </div>
        <div class="right">

        </div>
    </div>
</template>

<script>
export default {
    name: "IssuesList",

    data() {
        return {
            questions:[
                        {
                        title:'如果你的小孩是个学渣,你还会爱他吗？',
                        follow:226,
                        },
                        {
                        title:'如果你的小孩是个学渣,你还会爱他吗？',
                        follow:226,
                        },
                        {
                        title:'如果你的小孩是个学渣,你还会爱他吗？',
                        follow:226,
                        },
                        {
                        title:'如果你的小孩是个学渣,你还会爱他吗？',
                        follow:226,
                        },
                        {
                        title:'如果你的小孩是个学渣,你还会爱他吗？',
                        follow:226,
                        },
                        {
                        title:'如果你的小孩是个学渣,你还会爱他吗？',
                        follow:226,
                        },
                        {
                        title:'如果你的小孩是个学渣,你还会爱他吗？',
                        follow:226,
                        },
                     ]
        }
    },  

}
</script>

<style scoped>

.container{
    display: flex;
    justify-content: center;
}
.left{
    width: 700px;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px;
    height: 500px;
}
.right{
    width: 300px;
    height: 400px;
    background-color: white;
    margin: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.nav{
    width: auto;
    display: flex;
    justify-content: left;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: none;
}
.nav>.row{
    width: 100px;
    height: 30px;
    margin: 20px;
    text-align: center;
    background: rgba(132,147,165,.12) ;
    border-radius: 20px;
    line-height: 30px;
}
.row>a{
    font-size: 17px;
    width: 80px;
    color: #454545;
      
}
.row:hover{
  background: rgba(5,109,232,.08)
}
.show{
    
    width: auto;
    height: 120px;
    background-color: white;
    border-bottom: 1px solid  rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
}

.relative{
    margin: 10px;
}
.relative>div,a{
    margin: 10px;
}
.relative>div>span{
    color: rgb(132, 147, 165);
}
.relative>a{
    color: rgb(18, 18, 18);
    font-size: 17px;
    font-weight: 700;
}
.btn{
    margin: 40px 20px;
}
.btn>button{
    background-color: rgb(5, 109, 232)
}
</style>